<template>
    <view class="page">
        <back :title="'提现记录'" :isBack="true"></back>
        <scroll-view scroll-y class="record_big_box">
            <view class="txjl_box">提现记录</view>
            <view class="zs_js_box">
                <view class="top_box">
                    <view class="left_zs_js_box">
                        <view class="tx_box">
                            <image :src="recordList.avatar" mode="scaleToFill" />
                        </view>
                        <view>{{ recordList.nickname }}</view>
                    </view>
                    <view class="right_zs_js_box">
                        <view class="left_zs_js_top_box">{{ recordList.withdraw_money }}</view>
                        <view class="left_zs_js_bot_box">
                            <!-- {{ recordList.status_name }} -->
                        </view>
                    </view>
                </view>
                <view class="txsj_box" style="margin-bottom: 18rpx;">提现时间：{{ recordList.created_at }}</view>
                <view class="txsj_box" style="margin-bottom: 30rpx;">联系电话：{{ recordList.phone }}</view>
                <view class="lianggetupian_box">
                    <view class="left_box">
                        收款码：
                        <view class="shouuuanma_box">
                            <image :src="recordList.img_url" mode="scaleToFill" @click="openmoneyImg" />
                        </view>
                        <view class="changan_txt">（长按打开并识别保存收款码）</view>
                    </view>
                    <view class="right_box">
                        转账凭证：
                        <view class="zzpz_box">
                            <image v-if="image_url" :src="image_url" mode="scaleToFill" />
                            <u-icon v-else @click="upLoadimage" name="plus" color="rgba(199, 199, 199, 1)"
                                size="80"></u-icon>
                        </view>
                        <view class="changan_txt">上传转账凭证</view>
                    </view>
                </view>
                <view class="tijiao_box" @click="$noMultipleClicks(submit)">提交</view>
            </view>
        </scroll-view>
        <u-popup v-model="moneyShow" mode="center">
            <view class="yhq_box">
                <view class="chahao_box" @click="copupGB">
                    <image src="https://rubbish.lwjcg.com/static/order/yxh.png" mode="scaleToFill" />
                </view>
                <view class="img_box">
                    <image :src="recordList.img_url" mode="scaleToFill" :show-menu-by-longpress='true' />
                </view>
                <view class="image_text_box">长按识别并保存到相册</view>

            </view>
        </u-popup>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            moneyShow: false,
            noClick: true,//防连点
            recordList: {},
            withdraw_id: '',//提现列表id
            filepath: '',//接口图片链接
            file: '',
            image_url: '',//展示图片链接
        }
    },
    onLoad(options) {
        this.withdraw_id = options.withdraw_id
    },
    onShow() {
        this.getwithIndex()
    },
    methods: {
        openmoneyImg() {
            this.moneyShow = true
        },
        copupGB() {
            this.moneyShow = false
        },
        getwithIndex() {
            let data = {
                withdraw_id: this.withdraw_id
            }
            uni.showLoading({
                title: '加载中',
                mask: 'none'
            })
            this.$Request.post(this.$api.administrator.manageWithdrawDetail, data).then(res => {
                if (res.code == 200) {
                    this.recordList = res.data;
                }
            })
        },
        upLoadimage() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album','camera'], //从相册选择
                success: (res) => {
                    console.log(res);
                    this.file = res.tempFilePaths[0]

                    var uploadurl = "https://build.lwjcg.com/api/withdraw/upload?token=" + uni.getStorageSync("USERINFO")
                    uni.uploadFile({
                        url: uploadurl,
                        filePath: this.file,
                        name: 'img_url',
                        formData: {
                            'openid': uni.getStorageSync('openId')
                        },
                        success: (res) => {
                            console.log(res)
                            let group = JSON.parse(res.data)
                            console.log(group)
                            uni.showToast({
                                title: "上传成功",
                                icon: "success"
                            })
                            this.image_url = group.data.full_path
                            this.filepath = group.data.path
                        }
                    });
                }
            });


        },
        submit() {
            if (this.filepath) {
                let data = {
                    withdraw_id: this.withdraw_id,
                    voucher_url: this.filepath
                }
                this.$Request.post(this.$api.administrator.manageAudio, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: '提交成功',
                            icon: 'none',
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    }
                })
            } else {
                uni.showToast({
                    title: '请上传转账凭证',
                    icon: 'none',
                })
            }

        },
        //长按识别二维码
        handleLongPress(e) {
            uni.previewImage({
                urls: [e],
                longPressActions: {
                    itemList: ['发送给朋友', '保存图片', '收藏'],
                    success: (res) => {
                        console.log(res);
                    },
                    fail: (res) => {
                        console.log(res.errMsg);
                    }
                }
            })
        }

    }
}
</script>
<style lang="scss" scoped>
/deep/.u-mode-center-box {
    background-color: rgba(246, 246, 246, 0) !important;
}

.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .record_big_box {
        width: 704rpx;
        height: calc(100vh - 200rpx);
        border-radius: 28rpx;
        margin: auto;
        margin-top: 20rpx;
        background: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding-top: 28rpx;

        .txjl_box {
            width: 100%;
            box-sizing: border-box;
            padding-left: 28rpx;
            height: 40rpx;
            opacity: 1;
            font-size: 28rpx;
            line-height: 40rpx;
            color: rgba(0, 0, 0, 1);
            margin-bottom: 4rpx;

        }

        .zs_js_box {
            width: 636rpx;
            height: 692rpx;
            border-bottom: 2rpx solid rgba(245, 245, 245, 1);
            margin: auto;
            position: relative;

            .top_box {
                width: 636rpx;
                height: 144rpx;
                display: flex;
                margin: auto;
                justify-content: space-between;
                margin-bottom: 24rpx;

                .left_zs_js_box {
                    height: 100%;
                    width: 70%;
                    box-sizing: border-box;
                    padding-top: 32rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .tx_box {
                        width: 88.24rpx;
                        height: 88.24rpx;
                        border-radius: 50%;
                        margin-right: 12rpx;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }

                    }

                    .name_box {
                        height: 48.76rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 37.15rpx;
                        font-weight: 500;
                        letter-spacing: 0rpx;
                        line-height: 52.01rpx;
                        color: rgba(0, 0, 0, 1);

                    }
                }

                .right_zs_js_box {
                    height: 100%;
                    width: 28%;
                    box-sizing: border-box;
                    padding-top: 32rpx;

                    .left_zs_js_top_box {
                        width: 100%;
                        height: 46rpx;
                        font-size: 32rpx;
                        font-weight: 600;
                        line-height: 46rpx;
                        color: rgba(0, 0, 0, 1);
                        margin-bottom: 10rpx;
                        text-align: right;
                    }

                    .left_zs_js_bot_box {
                        width: 100%;
                        height: 34rpx;
                        opacity: 1;
                        font-size: 24rpx;
                        line-height: 34rpx;
                        color: rgba(128, 128, 128, 1);
                        text-align: right;

                    }
                }
            }

            .txsj_box {
                width: 636rpx;
                height: 37.15rpx;
                margin: auto;
                opacity: 1;
                /** 文本1 */
                font-size: 27.86rpx;
                font-weight: 400;
                line-height: 39.01rpx;
                color: rgba(128, 128, 128, 1);

            }

            .lianggetupian_box {
                width: 636rpx;
                height: 200rpx;
                margin: auto;
                display: flex;
                justify-content: space-between;


                .left_box {
                    width: 42%;
                    height: 240rpx;
                    // background-color: red;
                    position: relative;

                    .shouuuanma_box {
                        position: absolute;
                        right: 0;
                        top: 10rpx;
                        width: 143.96rpx;
                        height: 176.47rpx;
                        border-radius: 9.29rpx;
                        border: 4.64rpx solid rgba(26, 194, 121, 1);

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 9.29rpx;
                        }


                    }

                    .changan_txt {
                        position: absolute;
                        bottom: 0;
                        width: 312rpx;
                        height: 34rpx;
                        opacity: 1;
                        font-size: 22rpx;
                        font-weight: 400;
                        letter-spacing: 0rpx;
                        line-height: 33.6rpx;
                        color: rgba(128, 128, 128, 1);
                        text-align: left;

                    }
                }

                .right_box {
                    width: 44%;
                    height: 240rpx;
                    // background-color: aqua;
                    position: relative;

                    .zzpz_box {
                        position: absolute;
                        right: 0;
                        top: 10rpx;
                        width: 143.96rpx;
                        height: 176.47rpx;
                        border-radius: 9.29rpx;
                        border: 4.64rpx solid rgba(26, 194, 121, 1);
                        text-align: center;
                        line-height: 200rpx;
                    }

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 9.29rpx;
                    }

                    .changan_txt {
                        position: absolute;
                        bottom: 0;
                        right: 8rpx;
                        // width: 312rpx;
                        height: 34rpx;
                        opacity: 1;
                        font-size: 24rpx;
                        font-weight: 400;
                        letter-spacing: 0rpx;
                        line-height: 33.6rpx;
                        color: black;
                        // text-align: center;

                    }
                }
            }

            .tijiao_box {
                width: 652rpx;
                height: 100rpx;
                position: absolute;
                opacity: 1;
                border-radius: 20rpx;
                background: rgba(26, 194, 121, 1);
                text-align: center;
                line-height: 100rpx;
                font-size: 36rpx;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                left: 0;
                right: 0;
                margin: auto;
                bottom: 20rpx;


            }

        }



    }

    .yhq_box {
        width: 700rpx;
        height: 1200rpx;
        margin: auto;
        position: relative;

        .chahao_box {
            width: 100%;
            height: 70rpx;
            display: flex;
            justify-content: flex-end;
            margin-bottom: 50rpx;
            box-sizing: border-box;
            padding: 0 30rpx;

            image {
                width: 70rpx;
                height: 70rpx;
                border-radius: 50%;
            }
        }

        .img_box {
            width: 700rpx;
            height: 950rpx;
            margin: auto;
            margin-bottom: 50rpx;

            image {
                width: 100%;
                height: 100%
            }
        }

        .image_text_box {
            width: 100%;
            height: 52rpx;
            opacity: 1;
            text-align: center;
            /** 文本1 */
            font-size: 36rpx;
            font-weight: 400;
            line-height: 52rpx;
            color: rgba(255, 255, 255, 1);

        }




    }
}
</style>